
.editor-gutenberg-opt-in-notice {
	margin: 0 auto;
	width: auto;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	animation: slide-in-bottom cubic-bezier( 0.175, 0.885, 0.32, 1.275 ) 0.3s forwards;
	animation-delay: 4s;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.25 );
	z-index: z-index( 'root', '.editor-gutenberg-opt-in-notice' );

	@include breakpoint-deprecated( '<660px' ) {
		border-radius: 0;

		.notice__icon-wrapper {
			border-radius: 0;
		}
	}

	@include breakpoint-deprecated( '>660px' ) {
		right: 8px;
		bottom: 8px;
		left: 8px;

		.layout.focus-sidebar & {
			right: 272px + 8px;
		}
	}

	@include breakpoint-deprecated( '>960px' ) {
		max-width: 640px;
		bottom: 16px;

		.layout.focus-sidebar & {
			right: 272px + 16px;
		}
	}
}

@include breakpoint-deprecated( '<660px' ) {
	// We hide the notice on small viewports when the sidebar is open
	.focus-sidebar .editor-gutenberg-opt-in-notice {
		display: none;
	}
}

@keyframes slide-in-bottom {
	from {
		opacity: 0;
		transform: translateY( 30px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}
